<template>
    <div class="goods">
      <!-- 添加搜索框 -->
      <input type="text" v-model="searchQuery" placeholder="搜索用户名" class="search-input" />
      
      <div class="tbody" v-for="order in filteredOrderList" :key="order.id">
        <h3>用户名: {{ order.userName }} </h3>
        <h3>订单 ID: {{ order.id }} - 订单日期: {{ order.orderDate }}</h3>
        <div class="tr" v-for="goods in order.goodsList" :key="goods.id">
          <div class="td"><img :src="`../public/images/${goods.img}`" alt="" /></div>
          <div class="td">{{ goods.name }}</div>
          <div class="td">
            数量：{{ goods.num }}
            <span class="price-box">
              单价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;{{ goods.price }}
              <br>
              总价&nbsp;&nbsp;:&nbsp;&nbsp;¥&nbsp;{{ goods.price * goods.num }}
            </span>
          </div>
        </div>
        <div class="order-total">订单总价：¥{{ order.totalPrice }}</div>
      </div>
    </div>
  </template>
  
  <script>
  import axios from 'axios';
  import { ref, computed, onMounted } from 'vue';
  
  export default {
    setup() {
      const orderList = ref([]);
      const searchQuery = ref(''); // 用于绑定搜索框的输入值
  
      // 计算属性，根据 searchQuery 过滤 orderList
      const filteredOrderList = computed(() => {
  if (!searchQuery.value) {
    return orderList.value; // 如果没有搜索查询，返回所有订单
  }
  return orderList.value.filter(order =>
    order.userName && // 检查 userName 是否存在
    order.userName.toLowerCase().includes(searchQuery.value.toLowerCase())
  );
});
  
      // 假设 fetchOrderList 函数是从服务器获取订单列表的
      const fetchOrderList = async () => {
        try {
          const response = await axios.get('http://localhost:3000/orderList');
          orderList.value = response.data.map(order => ({
            ...order,
            // 计算每个订单的总价
            totalPrice: order.goodsList.reduce((sum, goods) => sum + goods.price * goods.num, 0)
          }));
        } catch (error) {
          console.error('获取订单列表失败:', error);
        }
      };
  
      // 在组件挂载时获取订单列表
      onMounted(fetchOrderList);
  
      // 返回响应式数据和计算属性
      return {
        orderList,
        searchQuery,
        filteredOrderList // 使用过滤后的订单列表进行渲染
      };
    }
  };
  </script>
   
  <style scoped>
  /* 基本样式重置 */
  body, html, div, h3, img, span {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
   
  /* 设置字体和背景颜色 */
  body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
  }
   
  /* 商品列表容器 */
  .goods {
    padding: 20px;
  }
   
  /* 订单容器 */
  .tbody {
    border: 1px solid #ddd;
    background-color: #fff;
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  }
   
  /* 订单标题 */
  .tbody h3 {
    margin-bottom: 15px;
    font-size: 18px;
    color: #555;
  }
   
  /* 商品行容器 */
  .tr {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
   
  /* 商品单元格 */
  .td {
    flex: 1;
    min-width: 150px;
    padding: 5px;
  }
   
  /* 商品图片 */
  .td img {
    max-width: 100%;
    height: 100px;
    width:100px;
    border-radius: 5px;
  }
   
  /* 商品名称 */
  .td:nth-child(2) {
    font-size: 16px;
    font-weight: bold;
  }
   
  /* 价格和数量容器 */
  .price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
   
  /* 订单总价 */
  .order-total {
    font-size: 16px;
    font-weight: bold;
    color: #f56342;
    margin-top: 15px;
  }
  .search-input {
  width: 300px; /* 设置宽度 */
  padding: 8px; /* 内边距 */
  font-size: 16px; /* 字体大小 */
  border: 1px solid #ccc; /* 边框 */
  border-radius: 4px; /* 边框圆角 */
  box-sizing: border-box; /* 包含内边距和边框在宽度内 */
  outline: none; /* 移除焦点时的默认轮廓 */
}
 
/* 可选的：当输入框获得焦点时改变边框颜色 */
.search-input:focus {
  border-color: #007bff; /* 蓝色边框 */
  box-shadow: 0 0 0 .2rem rgba(0,123,255,.25); /* 蓝色阴影 */
}
  </style>